這篇我們接著做:

1. 取得網頁上欄位資料
2. 資料送往後台
3. 資料寫回資料庫

取得欄位資料

在送資料到後台之前我們先來取得element上面的資料。
程式碼:

$("#menu_body > tr").each(function () {
        alert(
            $(this).children(".item").text() + ":"
            + $(this).children(".price").text() + ":"
            + $(this).children(".count").children("div").children("input").val()
        )
        
    })

我們可以透過JQery的選擇器幫我們想要的欄位，最後再透過.text()或.val()
取得欄位中的資料。

資料傳回後台

1. 開啟Customer.cshtml，將我們的按鈕新增click事件

$("#submitBtn").click(function () {
// do something
}

2. 接著在裡面添加.ajax()

$.ajax({
        url: "@Url.Action("Test")",
            type: "post",
            data: { "data": data},
        success: function (data) {

        },
        error: function (xhr, ajaxOptions, thrownError) {
            alert(xhr.status);
            alert(xhr.responseText);
            alert(thrownError);
        },
        complete: function () {

        }

        })

這邊@Url這個寫法是cshtml中特有的寫法，能直接幫忙指定對應Controller中的function()
3. 將菜單資料轉成json格式

var datamap = {}
        $("#menu_body > tr").each(function () {
            
            var count = $(this).children(".count").children("div").children("input").val()
            
            if (count > 0) {//有點餐的才寫入
                var uid = $(this).attr("id").replace("uid", "")//去頭"uid"，只留數字部分
                item = $(this).children(".item").text()
                price = $(this).children(".price").text()
                datamap[uid] = {
                    "uid":uid,"item": item, "price":price,"count":count }
                
            }
               
        })
        
        //將資料轉成 json格式
        var data = JSON.stringify(datamap)
        alert(data.toString())

這邊需要注意，請勿使用map來寫，map 與json的傳送在某些版本上是有問題的。
4. 完成整個click事件

$("#submitBtn").click(function () {
        var datamap = {}
        $("#menu_body > tr").each(function () {
            
            var count = $(this).children(".count").children("div").children("input").val()
            
            if (count > 0) {//有點餐的才寫入
                var uid = $(this).attr("id").replace("uid", "")//去頭"uid"，只留數字部分
                item = $(this).children(".item").text()
                price = $(this).children(".price").text()
                datamap[uid] = {
                    "uid":uid,"item": item, "price":price,"count":count }
                
            }
               
        })
        
        //將資料轉成 json格式
        var data = JSON.stringify(datamap)
        alert(data.toString())
        $.ajax({
        url: "@Url.Action("CreateOrder")",
            type: "post",
            data: { "data": data},
        success: function (data) {

            //開啟互動視窗
            $("#commitModal").modal('show');
        },
        error: function (xhr, ajaxOptions, thrownError) {
            alert(xhr.status);
            alert(xhr.responseText);
            alert(thrownError);
        },
        complete: function () {

        }

        })
    })

結語

我們現在已經可以把資料傳到後台了，
下一篇會接著做一些資料的處理跟寫入資料庫